<template>
  <div >
    <div class="bg_navs">
      <div class="title_nav">
        <span>优秀案例在颜述</span>
        <div @click="handleLogin">查看更多 &nbsp;&nbsp;></div>
      </div>
      <div class="swiper">
        <div class="left" @click="handleNext(false)">
          <div @mouseover="handleShow(0,true)" @mouseout="handleShow(0,false)">
            <Icon type="ios-arrow-back" size="20" custom ="vi-icon" :color="type =='0'? '#fb5770':'#424242'"/>
            <!-- <img :src="type=='0'?img.left1:img.left" alt=""> -->
          </div>
        </div>
        <div class="center" id="goodExample_center">
          <div class="content" :style="{'width':width*4+'px','transform':'translate3d(-'+(active*width)+'px,0px,0px)'}">
            <div class="item" v-for="(item,index) in list" :key="index">
              <div class="info">
                <div class="dot">#</div>
                <div class="title">{{item.title}}</div>
                <div class="label">{{item.label}}</div>
                <div class="line">
                  <div class="name">投放平台：</div>
                  <div class="val">{{item.platform}}</div>
                </div>
                <div class="line">
                  <div class="name">投放数量：</div>
                  <div class="val">{{item.count}}篇</div>
                </div>
                <div class="line">
                  <div class="name">投放结果：</div>
                  <div class="val">{{item.result}}</div>
                </div>
              </div>
              <div class="img">
                <img :src="item.mainPicUrl" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="left" style="justify-content:flex-end" @click="handleNext(true)">
          <div @mouseover="handleShow(1,true)" @mouseout="handleShow(1,false)">
            <Icon type="ios-arrow-forward" size="20" custom ="vi-icon" :color="type =='1'? '#fb5770':'#424242'"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/goodExample.css'
export default {
  name: 'goodExample',
  data () {
    return {
        width:0,
        type:'-1',
        list:[{
          title:'苏菲娜 X 颜述内容营销平台',
          label:'美妆类',
          platform:'小红书',
          count:1500,
          mainPicUrl: require('@/assets/01/s-001.png'),
          result:'#妆前乳# 关键字卡位前十，报备笔记信息流 投放，双十一流量竞争激烈的环境下，获得大量曝光品牌关键字投放，站内”苏菲娜”10月搜索人数环比上升64.09%。头部达人+中尾部达人配合投放打法，小红书品牌互动量上升220名'
        },{
          title:'橘朵 X 颜述内容营销平台',
          label:'美妆类',
          platform:'小红书',
          count:1200,
          mainPicUrl:require('@/assets/01/s-002.png'),
          result:'投放笔记过千篇，实现了品牌产品上亿级曝光，引发千万次热搜互动。高度配合店铺活动&天猫小黑盒活动，进行笔记布局，旗舰店新品销量过万。打造产品口碑，满足广大女性消费者的诉求新款上线即爆款'
        },{
          title:'康巴赫 X 颜述内容营销平台',
          label:'家具类',
          platform:'抖音',
          count:800,
          mainPicUrl:require('@/assets/01/s-003.png'),
          result:'通过地域、行为画像、兴趣画像，为品牌在抖音寻找新的人群圈层'
        },{
          title:'汉高 X 颜述内容营销平台',
          label:'洗护类',
          platform:'淘系',
          count:600,
          mainPicUrl:require('@/assets/01/s-004.png'),
          result:'为汉高家清输送优秀淘宝原创作品，擅长结合品牌特性，拍摄剧情/口播等内容视频。'
        }],
        active:0,
        height:document.body.clientHeight || document.documentElement.clientHeight
    }
  },
  methods:{
      pageResize(){
          this.height=document.body.clientHeight || document.documentElement.clientHeight
        this.width=document.getElementById('goodExample_center').offsetWidth
      },
      _isMobile() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        return flag;
      },
      handleLogin(){
         if (this._isMobile()) {
            this.$Modal.confirm({
                title: '提示',
                content: '暂不支持移动端设备,请到PC端打开',
                okText: '确定',
                cancelText: '取消'
            })
        }else{
           let channel = sessionStorage.getItem('channel')
           if (channel) {
           	window.open('https://cloud.redsay.net/login/1?channel=' + channel)
           } else {
           	window.open('https://cloud.redsay.net/login/1?channel=103')
           }
           return
        }
      },
      handleShow(type,e){
          if(e){
              this.type=type
          }else{
              this.type='-1'
          }
      },
      handleNext(e){
        if(e){
          this.active=this.active==(this.list.length-1)?0:(this.active+1)
        }else{
          this.active=this.active==0?(this.list.length-1):(this.active-1)
        }
      }
  },
  created(){
  },
  mounted(){
    var that=this
    this.width=document.getElementById('goodExample_center').offsetWidth
    window.onresize = ()=>{
        that.pageResize();
    } 
  },
}
</script>

<style scoped>

</style>